<script setup>
import "quarkd/lib/navbar";
import "quarkd/lib/uploader";
import "quarkd/lib/button";
import Toast from "quarkd/lib/toast";

import { ref, reactive, inject, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const uploader = ref(null);
const $http = inject('$http');

function back() {
  router.push({ name: 'main' });
}

const myFiles = reactive([]);
const otherFiles = reactive([]);

// 单独加载`我的文件`
function loadMyFiles() {
  $http.get('/backapi/file/mine').then( resp => {
    const { success, message } = resp.data;
    if( success ) {
      myFiles.length = 0;
      const files = resp.data.result;
      myFiles.push( ...files );
      return;
    }
    Toast.warning(message);
  }).catch( err => {
    Toast.error(err);
  })
}

// 加载我的文件和他人的文件
function loadFiles() {
  const promises = [$http.get('/backapi/file/mine'), $http.get('/backapi/file/other')];
  Promise.allSettled(promises).then(results => {
    const mine = results[0]; // { status: 'fulfilled' | 'rejected' , value: response }
    // console.log( mine );
    if( mine.status == 'fulfilled' ) {
      const {data} = mine.value;
      if( data.success ) {
        myFiles.push( ...data.result );
      }
    }
    const other = results[1]; // { status: 'fulfilled' | 'rejected' , value: response }
    // console.log( other );
    if( other.status == 'fulfilled' ) {
      const {data} = other.value;
      if( data.success ) {
        otherFiles.push( ...data.result );
      }
    }
  }).catch( err => {
    Toast.error(err);
  });
}

// 调用 loadFiles 方法加载文件
loadFiles();

onMounted( () => {
  // console.log( uploader ); // 想知道Quark组件中有什么吗？
  // 可以通过 beforeUpdate 的参数接收文件信息及其内容，并完成文件上传操作
  // 可以通过 beforeUpdate 的返回值确定是否能够展示图片预览
  uploader.value.beforeUpload = files => {
    console.log('file array: ', files );
    const url = '/backapi/file/upload';
    const data = new FormData();
    data.append('upfile', files[0]);
    $http.post(url, data).then( resp => {
      const { success, message } = resp.data;
      if( success ){
        Toast.text(message);
        // 刷新我的文件列表
        return;
      }
      Toast.text(message);
    }).catch( err => {
      Toast.text( err );
    })
    return true;
  };
});
</script>

<template>
  <div>
    <!--顶部标题-->
    <quark-navbar title="文件管理" closehide @leftclick="back"/>
    <!--我的文件-->
    <div class="files-wrapper mine">
      <p class="title">我的文件</p>
      <div v-for="(fi, index) in myFiles" :key="fi.id" class="file-info">
        {{ index + 1 }} , {{fi.name}}
      </div>
    </div>
    <!--他人文件-->
    <div class="files-wrapper other">
      <p class="title">他人文件</p>
      <div v-for="(fi, index) in otherFiles" :key="fi.id" class="file-info">
        {{ index + 1 }} , {{fi.name}}
      </div>
    </div>
    <!--文件上传-->
    <div class="upload-wrapper">
      <quark-uploader preview ref="uploader"/>
    </div>
  </div>
</template>

<style scoped>
.files-wrapper {
  margin: 15px;
  background: #fff;
  font-size: 30px;
}
.files-wrapper>.title {
  margin: 0;
  height: 60px;
  line-height: 60px;
  color: brown;
}
.files-wrapper>.file-info {
  height: 60px;
  line-height: 60px;
  border-top: 1px solid #dfdfdf;
}
.upload-wrapper {
  margin: 15px;
  background: #fff;
}
</style>